<template>
	<view class="pet-buy-page">
		<cu-custom isLeft :bgColor="scrollTop>CustomBar?'var(--primaryBg)':''">
			<template v-if='isLeft'>
				<view class='head-back head-position'  slot="left" >
					<image @click='handleBack' class='back-img' src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501101128200984.png" mode=""></image>
					<view class='title'>爱宠</view>
					<view @click="handleSwitch" slot="left" class="head-left">
						<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/pet-switch.png" mode=""></image>
						<view :style="scrollTop>CustomBar?'color:#fff':''" class="">切换</view>
					</view>
					
				</view>
				<view slot="right" @click="remindDetail" class="remind">
					<view class="remind-img">
						<image src="https://ballon-vdigit.oss-cn-qingdao.aliyuncs.com/20250228/202502281643518322.png" mode=""></image>
						<view v-if="readNum" class="">
							{{readNum}}
						</view>
					</view>
					<view class="remind-text">提醒</view>
				</view>
			</template>
			<template v-if='!isLeft'>
				<view @click="handleSwitch" slot="left" class="head-left head-position">
					<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/pet-switch.png" mode=""></image>
					<view class="">切换</view>
				</view>
				<view slot="content" :style="scrollTop>CustomBar?'color:#fff':''" class="title">
					爱宠
				</view>
				<view slot="right" class="remind">
					<view class="remind-img">
						<image src="https://ballon-vdigit.oss-cn-qingdao.aliyuncs.com/20250228/202502281643518322.png" mode=""></image>
						<view class="">
							1
						</view>
					</view>
					<view class="remind-text">提醒</view>
				</view>
			</template>
		</cu-custom>
		<view class="head">
			<view class="box">
				<view class="user">
					<image class="picture" :src="cargoDetail.picture" mode="aspectFill"></image>
					<view class="user-content">
						<view class="user-head">
							<view class="user-head-name text-cut">
								{{cargoDetail.name || '--'}}
							</view>
							<view @click="handleCode" class="user-set">
								<image :src="codeImg" mode=""></image>
								<view class="">
									扫码绑定
								</view>
							</view>
						</view>
						<view class="user-id">
							ID：{{cargoDetail.cargoNo || '--'}}
						</view>
					</view>
				</view>
				<view class="box-tab">
					<view class="box-tab-item">
						<view class="box-tab-value">{{cargoDetail.age || '--'}}</view>
						<view class="box-tab-key">年龄</view>
					</view>
					<view class="box-tab-item">
						<view class="box-tab-value">{{cargoDetail.type2Str || '--'}}</view>
						<view class="box-tab-key">品种</view>
					</view>
					<view class="box-tab-item">
						<view class="box-tab-value">
							{{cargoDetail.sex == 'Male'? '男孩' : cargoDetail.sex == 'Female' ? '女孩' : '未知'}}
						</view>
						<view class="box-tab-key">性别</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-img" v-if="cargoDetail.figure">
				<image @click.stop="previewImage(cargoDetail.figure,[cargoDetail.figure])" class="list-img"
					:src="cargoDetail.figure" mode="aspectFill"></image>
				<view class="list-switch" @click.stop="addImg">
					<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/switch.png" mode=""></image>
					<view class="">更换主形象</view>
				</view>
			</view>
			<view class="list-img1" v-else>
				<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412271521552830.png"
					mode=""></image>
				<view class="des">
					暂未添加主形象
				</view>
				<view class="btn-add" @click="addImg">
					点击添加
				</view>
			</view>
			<view class="list-title">动态</view>
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item-detail">
					{{item.content}}
				</view>
				<!-- 图片 ，视频-->
				<view class="item-img">
					<view class="item-img-box" v-if="item.images" v-for="(item1,index1) in item.images.split('@')">
						<image @click.stop="previewImage(item1,item.images.split('@'))" class="img-body" :src="item1"
							mode="aspectFill"></image>
					</view>
					<view class="item-img-box" v-if="item.videos" v-for="(item1,index1) in item.videos.split('@')">
						<video class="img-body" :src="item1" :controls='true' object-fit='fill'></video>
					</view>


				</view>
				<!-- 操作 -->
				<view class="item-set">
					<view class="">{{item.createTime}}</view>
					<image @click="handleOperate(item)"
						src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181405402942.png"
						mode=""></image>
				</view>
			</view>
			<data-null v-if="!list.length"></data-null>
		</view>
		<!-- 发布 -->
		<view class="add" @click="toPage('/pagesPet/pages/pet/activityAdd/index')">
			<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181419447233.png" mode="">
			</image>
			<view class="">发布</view>
		</view>
		<view class="" style="height: 200rpx;">

		</view>
		<itemOperate ref="itemOperate" :item="item"></itemOperate>
		<petSwitch ref="petSwitch"></petSwitch>
		<showModal1 ref="showModal1"></showModal1>
		<remindDetail ref="remindDetail"></remindDetail>
		<loginModal ref="loginModal" @loginSuccess="loginSuccess"></loginModal>
	</view>
</template>

<script>
	import itemOperate from "@/pages/pet/components/item-operate.vue"
	import petSwitch from "@/pages/pet/components/pet-switch.vue"
	import remindDetail from "@/components/remindPet/buy-detail.vue"
	import {
		getCargoDetail,
		opCargo
	} from "@/api/pet/index/saler"
	import {
		getActivityPage,
		getActivityDel
	} from "@/api/pet/activity/index"
	import {
		confirmRead,
		countRead
	} from "@/api/pet/remind/buyer.js"
	import showModal1 from "@/components/show-modal1.vue"
	import {
		imgUpload
	} from '@/api/common'
	import util from '@/common/util'
	export default {
		components: {
			itemOperate,
			petSwitch,
			showModal1,
			remindDetail
		},
		props: {
			isLeft: {
				type: Boolean,
				default: true
			},
			scrollTop: Number
		},
		data() {
			return {
				cargoDetail: {},
				currentCargo: {},
				CustomBar: this.CustomBar,
				params: {
					page: 1,
					limit: 10,
				},
				list: [],
				total: 0,
				item: {},
				codeImg: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181136200543.png', //扫码
				cargoList: [],
				shareData: {},
				readNum:0,
			}
		},
		methods: {
			countRead(){
				countRead().then(res=>{
					this.readNum = res
				})
			},
			remindDetail(){
				confirmRead().then(res=>{})
				setTimeout(()=>{
					this.countRead()
				},2000)
				this.$refs.remindDetail.handleOpen({
					
				})
			},
			loginSuccess(){
				this.init()
			},
			handleBack() {
				uni.navigateBack()
			},
			formatDisplayTime(dateStr) {
				const formatTime = (date) => {
					const hours = String(date.getHours()).padStart(2, '0');
					const minutes = String(date.getMinutes()).padStart(2, '0');
					return `${hours}:${minutes}`;
				};

				const isToday = (date) => {
					const today = new Date();
					const targetDate = new Date(date);

					targetDate.setHours(0, 0, 0, 0); // 设置为当天的0点0分0秒
					today.setHours(0, 0, 0, 0); // 同样设置为当天的0点0分0秒

					return today.getTime() === targetDate.getTime();
				};

				const isYesterday = (date) => {
					const today = new Date();
					const targetDate = new Date(date);

					targetDate.setHours(0, 0, 0, 0); // 设置为当天的0点0分0秒
					today.setHours(0, 0, 0, 0); // 同样设置为当天的0点0分0秒
					today.setDate(today.getDate() - 1); // 设置为昨天的日期

					return today.getTime() === targetDate.getTime();
				};

				const date = new Date(dateStr);
				if (isToday(date)) {
					return `今天 ${formatTime(date)}`;
				} else if (isYesterday(date)) {
					return `昨天 ${formatTime(date)}`;
				} else {
					return dateStr
				}
			},
			previewImage(url, urls) {
				uni.previewImage({
					urls: urls,
					current: url,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: (data) => {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			addImg() {
				if(!util.isLogin.call(this)) return;
				var _this = this
				if (!this.currentCargo.id) {
					uni.showToast({
						title: "请添加宠物",
						icon: "none"
					})
					return
				}
				uni.chooseImage({
					count: 1,
					success: res => {
						let tempFilePaths = res.tempFilePaths[0];
						_this.upload(tempFilePaths)
					}
				})

			},
			upload(file) {
				imgUpload(file).then(res => {
					let data = JSON.parse(res.data);
					opCargo({
						opid: this.cargoDetail.id,
						field: 'figure',
						value: data.url
					}).then(res => {
						if (res) {
							this.getCargoDetail()
						}
					})
				})

			},
			toPage(url) {
				if(!util.isLogin.call(this)) return;
				if (!this.currentCargo.id) {
					uni.showToast({
						title: "请添加宠物",
						icon: "none"
					})
					return
				}
				uni.navigateTo({
					url
				})
			},
			petSwitchCb(item) {
				this.currentCargo = item
				this.getCargoDetail()
			},
			init() {
				this.params.page = 1
				this.list = []
				this.countRead()
				this.$refs.petSwitch.init({
					success: this.petSwitchCb
				})
			},
			onScroll(e) {
				this.scrollTop = e.scrollTop
			},
			reachBottom() {
				if (this.total > this.params.page * this.params.limit) {
					this.params.page++
					this.getList()
				}
			},
			getCargoDetail() {
				if(!util.isLogin.call(this)) return;
				if (!this.currentCargo.id) {
					return
				}
				getCargoDetail({
					id: this.currentCargo.id
				}).then(res => {
					this.cargoDetail = res || {}
					this.getList()
				})
			},
			getList() {
				if(!util.isLogin.call(this)) return;
				this.isNull = false;
				getActivityPage({
					...this.params,
					cargoId: this.currentCargo.id
				}).then(res => {
					uni.stopPullDownRefresh()
					let list = res.rows || []
					list.forEach(item => {
						item.createTime = this.formatDisplayTime(item.createTime)
					})
					this.list = list

					this.total = res.total
				})
			},
			handleDel(item) {
				if(!util.isLogin.call(this)) return;
				this.$refs.showModal1.open({
					content: '确认删除此动态吗？',
					success: () => {
						getActivityDel({
							opid: this.item.id,
						}).then(res => {
							if (res) {
								uni.showToast({
									title: "删除成功"
								})
								this.init()
							}

						})
					}
				})
			},
			handleOperate(row) {
				if(!util.isLogin.call(this)) return;
				this.item = row
				this.$refs.itemOperate.handleOpen({
					success: (type) => {
						if (type == 'del') {
							this.handleDel()
						} else if (type == 'share') {
							this.shareData = {
								title: row.content,
								path: "/pages/index/index/index?path=/pages/pet/index/buyer"
							}
						}
					}
				})
			},
			handleSwitch() {
				if(!util.isLogin.call(this)) return;
				this.$refs.petSwitch.handleOpen({
					success: this.petSwitchCb
				})
			},
			handleCode() {
				if(!util.isLogin.call(this)) return;
				uni.scanCode({
					success: (res) => {
						uni.navigateTo({
							url: `/${res.path}`
						});
						console.log(res);
					}
				});
			},
		},
	}
</script>
<style>
	page {
		background: #f8f8f8;
	}
	.pet-buy-page .cu-custom .content{
		pointer-events: none;
	}
</style>
<style scoped lang="scss">
	.head-position{
		position: relative;
		z-index: 99;
	}
	.remind{
		width: max-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: auto;
		.remind-img{
			width: 40rpx;
			height: 40rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			view{
				background: #FE4338;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 26rpx;
				padding: 0 6rpx;
				border-radius: 30rpx;
				position: absolute;
				top: -8rpx;
				left: 26rpx;
			}
		}
		.remind-text{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #222222;
			line-height: 28rpx;
		}
	}
	.head-back {
		display: flex;
		align-items: center;
		width: max-content;
		padding-left: 32rpx;
		
		.back-img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}
		
		.title {
			font-weight: 600;
			font-size: 34rpx;
			color: var(--h1Color);
		}
	}
	
	.head-left {
		display: flex;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 8rpx 0 32rpx;
		}

		view {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 26rpx;
			color:var(--h2Color);
			line-height: 32rpx;
			white-space: nowrap;
		}
	}

	.title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: var(--h1Color);
		line-height: 48rpx;
	}

	.head {
		width: 686rpx;
		margin: 12rpx auto 0;
		position: relative;
		// background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;

		.head-tab {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx 100rpx;
			box-sizing: border-box;

			.head-tab-item {
				display: flex;
				align-items: center;

				image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 6rpx;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #666666;
					line-height: 36rpx;
				}
			}
		}

		.box {
			width: 100%;
			background: var(--primaryBg);
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 28rpx 28rpx 40rpx;
			box-sizing: border-box;

			.user {
				display: flex;
				align-items: center;
				margin-bottom: 48rpx;

				.picture {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					background: #eee;
					margin-right: 17rpx;
				}

				.user-content {
					flex: 1;

					.user-head {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 4rpx;

						.user-head-name {
							flex: 1;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 36rpx;
							color: var(--h1Color);
							line-height: 50rpx;
						}

						.user-set {
							display: flex;
							align-items: center;

							image {
								width: 34rpx;
								height: 34rpx;
								margin-right: 8rpx;
							}

							view {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: var(--h2Color);
								line-height: 32rpx;
							}
						}
					}

					.user-id {
						background: var(--primaryGradBg);
						border-radius: 21rpx;
						padding: 0 16rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: var(--h1Color);
						line-height: 40rpx;
						width: max-content;
					}
				}
			}

			.box-tab {
				width: 100%;
				height: 80rpx;
				display: flex;

				.box-tab-item {
					width: 33.33%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-right: 1rpx solid var(--primaryBg);

					&:last-child {
						border-right: none;
					}

					.box-tab-value {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: var(--h1Color);
						line-height: 42rpx;
					}

					.box-tab-key {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: var(--h3Color);
						line-height: 30rpx;
						margin-top: 8rpx;
					}
				}
			}
		}
	}

	.list {
		width: 100%;
		padding: 32rpx 0;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;

		.list-img1 {
			width: 686rpx;
			height: 686rpx;
			margin: 0 auto 64rpx;
			display: block;
			background: #F1F1F1;
			border-radius: 32rpx;
			overflow: hidden;
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			image {
				width: 240rpx;
				height: 240rpx;
			}

			.des {
				margin-top: 32rpx;
				ont-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: var(--h3Color);
				line-height: 37rpx;
				text-align: center;
				font-style: normal;
			}

			.btn-add {
				width: 188rpx;
				height: 70rpx;
				background:var(--h1Color);
				border-radius: 54rpx;
				margin-top: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: center;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.list-img {
			width: 686rpx;
			height: 686rpx;
			margin: 0 auto 64rpx;
			display: block;
			background: var(--primaryBg);
			border-radius: 32rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.list-switch {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 196rpx;
				height: 57rpx;
				background: rgba(0, 0, 0, 0.1);
				border-radius: 15rpx 0rpx 15rpx 0rpx;
				backdrop-filter: blur(10rpx);
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 33rpx;
				}
			}
		}

		.list-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: var(--h1Color);
			line-height: 50rpx;
			position: relative;
			margin-left: 32rpx;
			width: max-content;
			z-index: 1;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 34rpx;
				transform: translateX(-50%);
				width: 72rpx;
				height: 16rpx;
				background: var(--primaryBg);
				border-radius: 8rpx;
				z-index: -1;
			}
		}

		.item {
			width: 100%;
			padding: 48rpx 32rpx 48rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #F8F8F8;

			.item-detail {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: var(--h1Color);
				line-height: 45rpx;
				margin-bottom: 24rpx;
			}

			.item-img {
				width: 100%;
				display: flex;
				flex-flow: row wrap;

				.item-img-box {
					width: 222rpx;
					height: 222rpx;
					border-radius: 32rpx;
					margin: 0 10rpx 10rpx 0;
					background: #faec80;
					position: relative;
					overflow: hidden;

					&:nth-child(3n) {
						margin-right: 0;
					}

					&:last-child {
						margin-bottom: 34rpx;
					}

					.img-body {
						width: 100%;
						height: 100%;
					}

					.img-play {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

			}

			.item-set {
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: var(--h3Color);
					line-height: 37rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.add {
		position: fixed;
		left: 50%;
		bottom: 206rpx;
		transform: translateX(-50%);
		width: 202rpx;
		height: 80rpx;
		background: var(--primaryBg);
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 40rpx;
		border: 4rpx solid #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}

		view {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: var(--btnColor);
			line-height: 40rpx;
		}
	}
</style>